<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		/* 子元素在父元素中实现水平垂直居中
			1.给父元素设置边框,给子元素设置margin 上下为高一半 左右为宽一半  利用margin挤压 
			2.给父元素设置盒模型为边框盒子 通过padding挤压 上下为高一半 左右为宽一半 
			3.子元素绝对定位 父元素相对定位 简称为子绝父相
			子元素设置配合属性top left bottom right全部为0 margin:auto
			4.子绝父相 子元素top:50% left:50% margin-left:-width/2 
			margin-top:-height/2
		*/
		.parent{
			width: 200px;
			height: 200px;
			background-color: red;
			/* 1.1给父元素设置边框 */
			/* border: 1px solid red; */
			/* 2.1 通过padding挤压 */
			/* padding: 50px; */
			/* 2.2给父元素设置为边框盒子 */
			/* box-sizing: border-box; */
			/* 3.1 父元素相对定位 */
			/* position: relative; */
			/* 4.1父元素相对定位 */
			position: relative;

		}
		.child{
			/* 1.2 给子元素margin为宽高一半*/
			/* margin:50px ; */
			width: 100px;
			height: 100px;
			background-color: blue;
			/* 3.2子元素绝对定位 配合属性全部为 0 margin:auto*/
			/* position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto; */
			/* 4.2子元素绝对定位 top50% left50% margin-left:-width/2 
				margin-top -height/2
			*/
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -50px;
			margin-top: -50px;
		}
	</style>
</head>
<body>
	<!-- 块级元素实现水平垂直居中 -->
	<div class="parent">
		<div class="child"></div>
	</div>
</body>
</html>